<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <!--公共头-->
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="./lib/layui/css/layui.css">
    <link rel="stylesheet" href="css/x.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script src="js/x-common.js" charset="utf-8"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="x-body">
    <!--头部刷新按钮-->
    <div style="height: 38px;margin-top: 10px">
        <a class="layui-btn" style="float: right" href="javascript:location.replace(location.href);">
            <i class="layui-icon layui-icon-refresh"></i>
        </a>
    </div>
    <hr class="layui-bg-green">
    <table class="layui-hide" id="node" lay-filter="test">
    </table>
</div>
</body>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#node',
            // ,url:'/demo/table/user/'
            cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , even: true
            , cols: [[ //标题栏
                {fiele: 'check', type: 'checkbox'},
                {field: 'id', title: 'ID', width: 80, sort: true}
                , {field: 'username', title: '用户名', width: 120}
                , {field: 'email', title: '邮箱', minWidth: 150}
                , {field: 'sign', title: '签名', minWidth: 160}
                , {field: 'sex', title: '性别', width: 80}
                , {field: 'city', title: '城市', width: 100}
                , {field: 'experience', title: '积分', width: 80, sort: true}
                , {field: 'experience', title: '积分', width: 80, sort: true}
                , {fixed: 'right', align: 'center', toolbar: '#barDemo',}
            ]]
            , data: [{
                "id": "10001"
                , "username": "杜甫"
                , "email": "xianxin@layui.com"
                , "sex": "男"
                , "city": "浙江杭州"
                , "sign": "人生恰似一场修行"
                , "experience": "116"
                , "ip": "192.168.0.8"
                , "logins": "108"
                , "joinTime": "2016-10-14"
            }, {
                "id": "10002"
                , "username": "李白"
                , "email": "xianxin@layui.com"
                , "sex": "男"
                , "city": "浙江杭州"
                , "sign": "人生恰似一场修行"
                , "experience": "12"
                , "ip": "192.168.0.8"
                , "logins": "106"
                , "joinTime": "2016-10-14"
                , "LAY_CHECKED": true
            }, {
                "id": "10003"
                , "username": "王勃"
                , "email": "xianxin@layui.com"
                , "sex": "男"
                , "city": "浙江杭州"
                , "sign": "人生恰似一场修行"
                , "experience": "65"
                , "ip": "192.168.0.8"
                , "logins": "106"
                , "joinTime": "2016-10-14"
            }, {
                "id": "10004"
                , "username": "贤心"
                , "email": "xianxin@layui.com"
                , "sex": "男"
                , "city": "浙江杭州"
                , "sign": "人生恰似一场修行"
                , "experience": "666"
                , "ip": "192.168.0.8"
                , "logins": "106"
                , "joinTime": "2016-10-14"
            }, {
                "id": "10005"
                , "username": "贤心"
                , "email": "xianxin@layui.com"
                , "sex": "男"
                , "city": "浙江杭州"
                , "sign": "人生恰似一场修行"
                , "experience": "86"
                , "ip": "192.168.0.8"
                , "logins": "106"
                , "joinTime": "2016-10-14"
            }, {
                "id": "10006"
                , "username": "贤心"
                , "email": "xianxin@layui.com"
                , "sex": "男"
                , "city": "浙江杭州"
                , "sign": "人生恰似一场修行"
                , "experience": "12"
                , "ip": "192.168.0.8"
                , "logins": "106"
                , "joinTime": "2016-10-14"
            }, {
                "id": "10007"
                , "username": "贤心"
                , "email": "xianxin@layui.com"
                , "sex": "男"
                , "city": "浙江杭州"
                , "sign": "人生恰似一场修行"
                , "experience": "16"
                , "ip": "192.168.0.8"
                , "logins": "106"
                , "joinTime": "2016-10-14"
            }, {
                "id": "10008"
                , "username": "贤心"
                , "email": "xianxin@layui.com"
                , "sex": "男"
                , "city": "浙江杭州"
                , "sign": "人生恰似一场修行"
                , "experience": "106"
                , "ip": "192.168.0.8"
                , "logins": "106"
                , "joinTime": "2016-10-14"
            }]
        });

        //监听工具条
        table.on('tool(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'detail') { //查看
                //do somehing
                console.log(data);
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') { //编辑
                //do something
                //同步更新缓存对应的值
                x_admin_show("编辑", "node_edit.html", function (layero, index) {
                    var body = layer.getChildFrame('body', index);
                    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    // body.find('input').val('Hi，我是从父页来的')
                    iframeWin.formInit(data);
                })
                // obj.update({
                //     username: '123'
                // });
            }
        });
    });
</script>
</html>